<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>恋爱餐厅小程序 - 界面原型图</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="prototype-container">
        <h1>恋爱餐厅小程序 - 完整界面原型图</h1>
        
        <!-- 导航菜单 -->
        <nav class="prototype-nav">
            <a href="#home" class="nav-item active">首页</a>
            <a href="#menu" class="nav-item">菜单</a>
            <a href="#cart" class="nav-item">购物车</a>
            <a href="#orders" class="nav-item">订单</a>
            <a href="#points" class="nav-item">积分</a>
            <a href="#events" class="nav-item">事件</a>
            <a href="#profile" class="nav-item">我的</a>
        </nav>

        <!-- 1. 首页 -->
        <section id="home" class="screen-section">
            <h2>🏠 首页</h2>
            <div class="phone-screen">
                <div class="status-bar">
                    <span class="time">09:41</span>
                    <div class="status-icons">
                        <span class="signal">📶</span>
                        <span class="wifi">📡</span>
                        <span class="battery">🔋</span>
                    </div>
                </div>
                
                <div class="screen-content">
                    <div class="header">
                        <h3>恋爱餐厅</h3>
                        <div class="user-info">
                            <img src="https://via.placeholder.com/40x40/ff6b6b/fff?text=❤" alt="头像" class="avatar">
                            <span class="nickname">小张 & 小李</span>
                        </div>
                    </div>
                    
                    <div class="banner">
                        <img src="https://via.placeholder.com/350x150/ff6b6b/fff?text=浪漫双人套餐" alt="banner">
                    </div>
                    
                    <div class="quick-actions">
                        <div class="action-card">
                            <div class="icon">🍽️</div>
                            <span>开始点餐</span>
                        </div>
                        <div class="action-card">
                            <div class="icon">💰</div>
                            <span>我的积分: 520</span>
                        </div>
                        <div class="action-card">
                            <div class="icon">🎪</div>
                            <span>今日任务</span>
                        </div>
                        <div class="action-card">
                            <div class="icon">📋</div>
                            <span>历史订单</span>
                        </div>
                    </div>
                    
                    <div class="today-special">
                        <h4>今日特色</h4>
                        <div class="special-dish">
                            <img src="https://via.placeholder.com/80x80/4ecdc4/fff?text=🍝" alt="意面">
                            <div class="dish-info">
                                <h5>浪漫意式肉酱面</h5>
                                <p>积分: 45</p>
                                <button class="add-btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-bar">
                    <div class="tab active">首页</div>
                    <div class="tab">菜单</div>
                    <div class="tab">订单</div>
                    <div class="tab">我的</div>
                </div>
            </div>
        </section>

        <!-- 2. 菜单页面 -->
        <section id="menu" class="screen-section">
            <h2>📋 菜单页面</h2>
            <div class="phone-screen">
                <div class="screen-content">
                    <div class="search-bar">
                        <input type="text" placeholder="搜索菜品..." class="search-input">
                        <button class="filter-btn">筛选</button>
                    </div>
                    
                    <div class="category-tabs">
                        <div class="category active">全部</div>
                        <div class="category">主食</div>
                        <div class="category">小吃</div>
                        <div class="category">饮品</div>
                        <div class="category">甜点</div>
                    </div>
                    
                    <div class="dish-list">
                        <div class="dish-card">
                            <img src="https://via.placeholder.com/100x100/ff6b6b/fff?text=🍕" alt="披萨">
                            <div class="dish-details">
                                <h4>爱心披萨</h4>
                                <p class="desc">新鲜番茄酱配芝士</p>
                                <div class="points">积分: 35</div>
                            </div>
                            <button class="add-cart">加入购物车</button>
                        </div>
                        
                        <div class="dish-card">
                            <img src="https://via.placeholder.com/100x100/4ecdc4/fff?text=🥗" alt="沙拉">
                            <div class="dish-details">
                                <h4>情侣沙拉</h4>
                                <p class="desc">新鲜蔬菜配特制酱料</p>
                                <div class="points">积分: 25</div>
                            </div>
                            <button class="add-cart">加入购物车</button>
                        </div>
                        
                        <div class="dish-card">
                            <img src="https://via.placeholder.com/100x100/45b7d1/fff?text=🍰" alt="蛋糕">
                            <div class="dish-details">
                                <h4>爱心蛋糕</h4>
                                <p class="desc">草莓奶油蛋糕</p>
                                <div class="points">积分: 40</div>
                            </div>
                            <button class="add-cart">加入购物车</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 3. 购物车页面 -->
        <section id="cart" class="screen-section">
            <h2>🛒 购物车</h2>
            <div class="phone-screen">
                <div class="screen-content">
                    <div class="cart-header">
                        <h3>购物车 (3)</h3>
                        <button class="clear-btn">清空</button>
                    </div>
                    
                    <div class="cart-items">
                        <div class="cart-item">
                            <img src="https://via.placeholder.com/60x60/ff6b6b/fff?text=🍕" alt="披萨">
                            <div class="item-info">
                                <h4>爱心披萨</h4>
                                <p>积分: 35</p>
                            </div>
                            <div class="quantity-control">
                                <button class="minus">-</button>
                                <span class="quantity">1</span>
                                <button class="plus">+</button>
                            </div>
                        </div>
                        
                        <div class="cart-item">
                            <img src="https://via.placeholder.com/60x60/4ecdc4/fff?text=🥗" alt="沙拉">
                            <div class="item-info">
                                <h4>情侣沙拉</h4>
                                <p>积分: 25</p>
                            </div>
                            <div class="quantity-control">
                                <button class="minus">-</button>
                                <span class="quantity">2</span>
                                <button class="plus">+</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="cart-summary">
                        <div class="summary-row">
                            <span>总计:</span>
                            <span class="total-points">85积分</span>
                        </div>
                        <div class="summary-row">
                            <span>当前积分:</span>
                            <span class="current-points">520积分</span>
                        </div>
                    </div>
                    
                    <button class="checkout-btn">提交订单</button>
                </div>
            </div>
        </section>

        <!-- 4. 订单页面 -->
        <section id="orders" class="screen-section">
            <h2>📋 订单管理</h2>
            <div class="phone-screen">
                <div class="screen-content">
                    <div class="order-tabs">
                        <div class="tab active">全部</div>
                        <div class="tab">进行中</div>
                        <div class="tab">已完成</div>
                    </div>
                    
                    <div class="order-list">
                        <div class="order-card">
                            <div class="order-header">
                                <span class="order-no">订单号: 20240101001</span>
                                <span class="status pending">进行中</span>
                            </div>
                            <div class="order-items">
                                <div class="mini-item">爱心披萨 x1</div>
                                <div class="mini-item">情侣沙拉 x2</div>
                            </div>
                            <div class="order-footer">
                                <span class="total">总计: 85积分</span>
                                <span class="time">10分钟前</span>
                            </div>
                        </div>
                        
                        <div class="order-card completed">
                            <div class="order-header">
                                <span class="order-no">订单号: 20240101002</span>
                                <span class="status completed">已完成</span>
                            </div>
                            <div class="order-items">
                                <div class="mini-item">浪漫意面 x1</div>
                            </div>
                            <div class="order-footer">
                                <span class="total">总计: 45积分</span>
                                <span class="time">昨天</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 5. 积分页面 -->
        <section id="points" class="screen-section">
            <h2>💰 积分中心</h2>
            <div class="phone-screen">
                <div class="screen-content">
                    <div class="points-header">
                        <div class="points-display">
                            <div class="points-amount">520</div>
                            <div class="points-label">当前积分</div>
                        </div>
                        <div class="points-stats">
                            <div class="stat">
                                <div class="number">1280</div>
                                <div class="label">总获得</div>
                            </div>
                            <div class="stat">
                                <div class="number">760</div>
                                <div class="label">已使用</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="points-actions">
                        <button class="action-btn">获取积分</button>
                        <button class="action-btn">积分记录</button>
                    </div>
                    
                    <div class="earn-points">
                        <h4>快速获取积分</h4>
                        <div class="task-list">
                            <div class="task-item">
                                <div class="task-icon">💋</div>
                                <div class="task-info">
                                    <h5>早安吻</h5>
                                    <p>+10积分</p>
                                </div>
                                <button class="do-task">去完成</button>
                            </div>
                            <div class="task-item">
                                <div class="task-icon">🧽</div>
                                <div class="task-info">
                                    <h5>洗碗任务</h5>
                                    <p>+20积分</p>
                                </div>
                                <button class="do-task">去完成</button>
                            </div>
                            <div class="task-item">
                                <div class="task-icon">🤗</div>
                                <div class="task-info">
                                    <h5>爱的拥抱</h5>
                                    <p>+15积分</p>
                                </div>
                                <button class="do-task">去完成</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 6. 自定义事件页面 -->
        <section id="events" class="screen-section">
            <h2>🎪 自定义事件</h2>
            <div class="phone-screen">
                <div class="screen-content">
                    <div class="events-header">
                        <h3>今日任务</h3>
                        <button class="add-event">+ 创建事件</button>
                    </div>
                    
                    <div class="events-list">
                        <div class="event-card">
                            <div class="event-icon">🌅</div>
                            <div class="event-info">
                                <h4>早起打卡</h4>
                                <p>7:00前起床并拍照证明</p>
                                <span class="points">+15积分</span>
                            </div>
                            <button class="trigger-btn">触发</button>
                        </div>
                        
                        <div class="event-card">
                            <div class="event-icon">💌</div>
                            <div class="event-info">
                                <h4>爱的留言</h4>
                                <p>给对方写一条暖心留言</p>
                                <span class="points">+10积分</span>
                            </div>
                            <button class="trigger-btn">触发</button>
                        </div>
                        
                        <div class="event-card completed">
                            <div class="event-icon">🍳</div>
                            <div class="event-info">
                                <h4>爱心早餐</h4>
                                <p>为对方准备早餐</p>
                                <span class="points completed">+25积分 ✓</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 7. 个人中心 -->
        <section id="profile" class="screen-section">
            <h2>👤 个人中心</h2>
            <div class="phone-screen">
                <div class="screen-content">
                    <div class="profile-header">
                        <img src="https://via.placeholder.com/80x80/ff6b6b/fff?text=❤" alt="头像" class="profile-avatar">
                        <div class="profile-info">
                            <h3>小张 & 小李</h3>
                            <p>恋爱天数: 365天</p>
                        </div>
                    </div>
                    
                    <div class="profile-stats">
                        <div class="stat-item">
                            <div class="stat-number">520</div>
                            <div class="stat-label">当前积分</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">128</div>
                            <div class="stat-label">完成订单</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">89</div>
                            <div class="stat-label">完成任务</div>
                        </div>
                    </div>
                    
                    <div class="profile-menu">
                        <div class="menu-item">
                            <span class="icon">👥</span>
                            <span>情侣信息</span>
                            <span class="arrow">›</span>
                        </div>
                        <div class="menu-item">
                            <span class="icon">📱</span>
                            <span>通知设置</span>
                            <span class="arrow">›</span>
                        </div>
                        <div class="menu-item">
                            <span class="icon">🎨</span>
                            <span>主题设置</span>
                            <span class="arrow">›</span>
                        </div>
                        <div class="menu-item">
                            <span class="icon">❓</span>
                            <span>帮助中心</span>
                            <span class="arrow">›</span>
                        </div>
                        <div class="menu-item">
                            <span class="icon">ℹ️</span>
                            <span>关于我们</span>
                            <span class="arrow">›</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 8. 通知弹窗 -->
        <section id="notification" class="screen-section">
            <h2>🔔 通知示例</h2>
            <div class="phone-screen">
                <div class="screen-content">
                    <div class="notification-overlay">
                        <div class="notification-popup">
                            <div class="notification-icon">🍕</div>
                            <h4>新订单通知</h4>
                            <p>您有一个新的订单已提交</p>
                            <div class="notification-actions">
                                <button class="btn-secondary">稍后</button>
                                <button class="btn-primary">查看详情</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="notification-list">
                        <div class="notification-item">
                            <div class="noti-icon">🍕</div>
                            <div class="noti-content">
                                <h5>订单提交成功</h5>
                                <p>您的订单已提交，等待确认</p>
                                <span class="time">2分钟前</span>
                            </div>
                        </div>
                        <div class="notification-item">
                            <div class="noti-icon">💰</div>
                            <div class="noti-content">
                                <h5>积分变动</h5>
                                <p>获得20积分：完成洗碗任务</p>
                                <span class="time">1小时前</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        // 简单的页面切换功能
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                const target = e.target.getAttribute('href').substring(1);
                
                // 更新导航状态
                document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
                e.target.classList.add('active');
                
                // 显示对应区域
                document.querySelectorAll('.screen-section').forEach(section => {
                    section.style.display = section.id === target ? 'block' : 'none';
                });
            });
        });

        // 默认显示首页
        document.querySelectorAll('.screen-section').forEach(section => {
            section.style.display = section.id === 'home' ? 'block' : 'none';
        });
    </script>
</body>
</html>